<template>
  <div class="internship-container">
    <el-card shadow="never">
      <!-- 搜索栏 -->
      <div class="filter-header">
        <el-input
          v-model="filter.id"
          placeholder="编号"
          style="width: 120px"
          class="filter-item"
        />
        <el-input
          v-model="filter.name"
          placeholder="名称"
          style="width: 140px; margin-left: 10px"
          class="filter-item"
        />
        <el-button @click="search" type="primary" style="margin-left: 15px">搜索</el-button>
        <el-button @click="reset" style="margin-left: 10px">重置</el-button>
      </div>

      <!-- 操作按钮 -->
      <div class="action-buttons">
        <el-button @click="showPublishDialog" type="text" style="font-weight: bold; font-size: 16px">发布</el-button>
      </div>

      <!-- 数据表格 -->
      <el-table
        :data="filteredData"
        style="width: 100%"
        header-row-class-name="table-header"
      >
        <el-table-column prop="id" label="编号" width="80" align="center"/>
        <el-table-column prop="name" label="名称" width="150"/>
        <el-table-column prop="requirement" label="申请要求" width="120"/>
        <el-table-column prop="deadline" label="申请截至时间" width="150"/>
        <el-table-column prop="weekly_count" label="周报数量" width="100" align="center"/>
        <el-table-column prop="weekly_requirement" label="周报要求" width="150"/>
        <el-table-column prop="start_time" label="周报开始时间" width="150"/>
        <el-table-column prop="end_time" label="周报结束时间" width="150"/>
        <el-table-column prop="weekly_percent" label="周报成绩占比" width="150" align="center"/>
        <el-table-column prop="total_percent" label="总成绩占比" width="150" align="center"/>
        <el-table-column label="操作" width="150" align="center">
          <template slot-scope="scope">
            <el-button @click="showEditDialog(scope.row)" type="text" size="mini">编辑</el-button>
            <el-button @click="showDeleteDialog(scope.row)" type="text" size="mini" style="color: #F56C6C">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页信息 -->
      <div class="pagination-info">
        第{{ pagination.start }}到{{ pagination.end }}条，共{{ pagination.total }}条记录。
      </div>
    </el-card>

    <!-- 发布对话框 -->
    <el-dialog :visible.sync="dialogVisible.publish" title="发布">
      <div>
        <el-input v-model="publishForm.name" placeholder="请输入发布内容名称"></el-input>
        <el-input v-model="publishForm.requirement" placeholder="请输入申请要求"></el-input>
        <el-input v-model="publishForm.deadline" placeholder="请输入申请截止日期"></el-input>
        <el-input v-model="publishForm.weekly_count" placeholder="请输入周报数量"></el-input>
        <el-input v-model="publishForm.weekly_percent" placeholder="请输入周报成绩占比"></el-input>
        <el-input v-model="publishForm.total_percent" placeholder="请输入总成绩占比"></el-input>

        <!-- 使用 el-date-picker 选择开始时间和结束时间 -->
        <el-date-picker
          v-model="publishForm.start_time"
          type="date"
          placeholder="选择周报开始时间"
          style="width: 100%; margin-top: 10px;"
        />
        <el-date-picker
          v-model="publishForm.end_time"
          type="date"
          placeholder="选择周报结束时间"
          style="width: 100%; margin-top: 10px;"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible.publish = false">取消</el-button>
        <el-button type="primary" @click="publish">确定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑对话框 -->
    <el-dialog :visible.sync="dialogVisible.edit" title="修改">
      <div>
        <el-input v-model="editForm.name" placeholder="名称"></el-input>
        <el-input v-model="editForm.requirement" placeholder="申请要求"></el-input>
        <el-input v-model="editForm.deadline" placeholder="申请截至时间"></el-input>

        <!-- 使用 el-date-picker 选择开始时间和结束时间 -->
        <el-date-picker
          v-model="editForm.start_time"
          type="date"
          placeholder="选择周报开始时间"
          style="width: 100%; margin-top: 10px;"
        />
        <el-date-picker
          v-model="editForm.end_time"
          type="date"
          placeholder="选择周报结束时间"
          style="width: 100%; margin-top: 10px;"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible.edit = false">取消</el-button>
        <el-button type="primary" @click="edit">确定</el-button>
      </span>
    </el-dialog>

    <!-- 删除对话框 -->
    <el-dialog :visible.sync="dialogVisible.delete" title="删除">
      <span>确定要删除此项吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible.delete = false">取消</el-button>
        <el-button type="primary" @click="deleteItem">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filter: {
        id: '',
        name: ''
      },
      tableData: [
        {
          id: 9,
          name: '顶岗实习',
          requirement: '123',
          deadline: '2020-07-10',
          weekly_count: 4,
          weekly_requirement: '4',
          start_time: '2020-06-25',
          end_time: '2020-08-21',
          weekly_percent: 40,
          total_percent: 60
        },
        {
          id: 10,
          name: '顶岗实习',
          requirement: '7',
          deadline: '2020-06-11',
          weekly_count: 7,
          weekly_requirement: '7',
          start_time: '2020-06-26',
          end_time: '2020-07-11',
          weekly_percent: 40,
          total_percent: 60
        },
        {
          id: 11,
          name: '顶岗实习',
          requirement: '无挂科',
          deadline: '2020-06-30',
          weekly_count: 4,
          weekly_requirement: '111111111',
          start_time: '2020-07-15',
          end_time: '2020-08-20',
          weekly_percent: 40,
          total_percent: 60
        },
        {
          id: 12,
          name: '顶岗实习',
          requirement: '无挂科',
          deadline: '2020-06-30',
          weekly_count: 4,
          weekly_requirement: '11',
          start_time: '2020-07-01',
          end_time: '2020-08-11',
          weekly_percent: 40,
          total_percent: 60
        },
        {
          id: 13,
          name: '顶岗实习',
          requirement: '无挂科',
          deadline: '2022-10-20',
          weekly_count: 4,
          weekly_requirement: '11',
          start_time: '2022-01-01',
          end_time: '2022-11-01',
          weekly_percent: 40,
          total_percent: 60
        }
      ],
      filteredData: [],
      pagination: {
        start: 1,
        end: 5,
        total: 6
      },
      dialogVisible: {
        publish: false,
        edit: false,
        delete: false
      },
      publishForm: {
        name: '',
        requirement: '',
        deadline: '',
        weekly_count: '',
        weekly_percent: '',
        total_percent: '',
        start_time: '',
        end_time: ''
      },
      editForm: {
        id: '',
        name: '',
        requirement: '',
        deadline: '',
        start_time: '',
        end_time: ''
      },
      selectedItem: null
    };
  },
  methods: {
    // Search method
    search() {
      this.filteredData = this.tableData.filter(item => {
        return (
          (this.filter.id ? item.id.toString().includes(this.filter.id) : true) &&
          (this.filter.name ? item.name.includes(this.filter.name) : true)
        );
      });
    },

    // Reset method
    reset() {
      this.filter.id = '';
      this.filter.name = '';
      this.filteredData = this.tableData;
    },

    // Publish action
    showPublishDialog() {
      this.dialogVisible.publish = true;
    },
    publish() {
      // Publish the new internship data
      this.tableData.push({ ...this.publishForm, id: Date.now() });  // Add a new entry with a unique ID
      this.dialogVisible.publish = false;
    },

    // Edit action
    showEditDialog(item = null) {
      if (item) {
        this.editForm = { ...item };
        this.selectedItem = item;
      }
      this.dialogVisible.edit = true;
    },
    edit() {
      const index = this.tableData.findIndex(item => item.id === this.selectedItem.id);
      if (index !== -1) {
        this.tableData.splice(index, 1, { ...this.selectedItem });
      }
      this.dialogVisible.edit = false;
    },

    // Delete action
    showDeleteDialog(item = null) {
      this.selectedItem = item;
      this.dialogVisible.delete = true;
    },
    deleteItem() {
      const index = this.tableData.findIndex(item => item.id === this.selectedItem.id);
      if (index !== -1) {
        this.tableData.splice(index, 1);
      }
      this.dialogVisible.delete = false;
    }
  },
  created() {
    this.filteredData = this.tableData;
  }
};
</script>

<style scoped>
.internship-container {
  padding: 20px;
}

.filter-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.action-buttons {
  margin: 15px 0 25px;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 12px;
}

.table-header th {
  background-color: #f5f7fa !important;
  font-weight: 600;
}

.pagination-info {
  margin-top: 20px;
  color: #909399;
  font-size: 13px;
  text-align: center;
}

.el-tag {
  padding: 0 8px;
  height: 24px;
  line-height: 22px;
}

.el-button--text {
  padding: 0;
  font-size: 14px;
}

#发布 {
  font-weight: 700;
}
</style>
